// 修复导入问题
import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { NavBar } from 'antd-mobile'
import '../App.css'

function Zhi() {
  const [addressList, setAddressList] = useState([])
  const navigate = useNavigate()

  useEffect(() => {
    fetch('http://localhost:3000/list3')
      .then(res => res.json())
      .then(data => {
        if (data.code === 200 && data.list2) {
          setAddressList(data.list2)
        }
      })
  }, [])
  const back = () => {
    navigate('/jie')
  }
  return (
    <div style={{ background: '#fff', minHeight: '100vh', paddingBottom: '80px' }}>
      {/* 顶部栏 */}
      <div style={{
        position: 'sticky',
        top: 0,
        background: '#fff',
        zIndex: 10,
        padding: '16px 0 8px 0',
        borderBottom: '1px solid #f0f0f0',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      }}>
        <div style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)' }}>
          <span onClick={back} style={{ cursor: 'pointer', fontSize: '18px' }}>←</span>
        </div>
        <div style={{ fontWeight: 'bold', fontSize: '18px', color: '#222' }}>
          选择收货地址
        </div>
        <div style={{ position: 'absolute', right: '16px', top: '50%', transform: 'translateY(-50%)' }}>
          <span
            style={{ fontSize: '14px', color: '#ff4d4f', cursor: 'pointer' }}
            onClick={() => navigate('/address-management')}
          >
            管理
          </span>
        </div>
      </div>
      {/* 地址列表 */}
      <div style={{ padding: '16px 0 0 0' }}>
        {addressList.map((item, idx) => (
          <div
            key={item._id || idx}
            style={{
              background: item.isDefault ? '#f8fffa' : '#fafbfc',
              border: item.isDefault ? '1.5px solid #19c2a6' : 'none',
              borderRadius: 12,
              margin: '0 16px 16px 16px',
              padding: '16px',
              boxShadow: item.isDefault ? '0 0 0 2px #e6f7f1' : 'none',
              position: 'relative',
              minHeight: 80,
              cursor: 'pointer'  // 光标样式已添加到整个卡片
            }}

          >
            <div style={{ display: 'flex', alignItems: 'center', marginBottom: 6 }}>
              <span
                style={{
                  fontWeight: 'bold',
                  fontSize: 15,
                  color: '#222',
                  marginRight: 8
                  // 移除光标样式
                }}// 移除点击事件
                onClick={() => {
                  // 存储选中的地址
                  localStorage.setItem('selectedAddress', JSON.stringify({
                    name: item.name,
                    phone: item.phone,
                    address: `${item.di || ''} ${item.xiang || ''}`
                  }));
                  // 跳转到jie.jsx页面
                  navigate('/jie');
                }}// 点击事件已添加到整个卡片
              >{item.name}</span>
              <span style={{ color: '#666', fontSize: 15 }}>{item.phone}</span>
              {(item.isDefault === true || item.isDefault === 'true' || item.isDefault === 1 || item.mo === true || item.mo === 'true' || item.mo === 1) && (
                <span style={{
                  background: '#ff4d4f',
                  color: '#fff',
                  fontSize: 13,
                  borderRadius: 16,
                  padding: '2px 12px',
                  marginLeft: 12,
                  fontWeight: 'bold'
                }}>默认</span>
              )}
            </div>
            <div style={{ color: '#444', fontSize: 14, marginBottom: 0 }}>
              {(item.di || '') + (item.xiang ? ' ' + item.xiang : '')}
            </div>
            {/* 编辑按钮 */}
            <span
              style={{
                position: 'absolute',
                right: 18,
                top: 18,
                cursor: 'pointer',
                color: '#222',
                fontSize: 20
              }}
              title="编辑"
              onClick={() => navigate('/add', { state: { id: item._id, address: item } })}
            >
              <svg t="1753148114306" className="icon" viewBox="0 0 1024 1024" width="20" height="20" style={{ display: 'block' }}><path d="M786.637 989.867h-615.731c-56.593 0-102.639-46.046-102.639-102.639v-684.169c0-56.593 46.046-102.639 102.639-102.639h478.925c18.91 0 34.202 15.326 34.202 34.202s-15.292 34.202-34.202 34.202h-478.925c-18.842 0-34.202 15.36-34.202 34.202v684.169c0 18.876 15.36 34.202 34.202 34.202h615.765c18.876 0 34.202-15.326 34.202-34.202v-547.294c0-18.876 15.292-34.202 34.202-34.202s34.202 15.326 34.202 34.202v547.328c0 56.593-46.046 102.639-102.639 102.639v0zM585.66 442.539c-8.772 0-17.51-3.345-24.166-10.035-13.38-13.38-13.38-34.987 0-48.367l339.968-339.968c13.38-13.38 34.987-13.38 48.367 0 13.38 13.38 13.38 34.987 0 48.367l-339.968 339.968c-6.656 6.69-15.428 10.035-24.201 10.035v0zM444.553 442.539h-205.244c-18.876 0-34.202-15.326-34.202-34.202s15.326-34.202 34.202-34.202h205.244c18.876 0 34.202 15.326 34.202 34.202s-15.326 34.202-34.202 34.202v0zM649.83 647.782h-410.522c-18.876 0-34.202-15.292-34.202-34.202s15.326-34.202 34.202-34.202h410.487c18.91 0 34.202 15.292 34.202 34.202 0.034 18.91-15.258 34.202-34.167 34.202v0zM649.83 647.782z" fill="#272636"></path></svg>
            </span>
          </div>
        ))}
      </div>
      {/* 新增收货地址按钮 */}
      <div style={{
        position: 'fixed',
        left: 0,
        right: 0,
        bottom: 0,
        background: 'transparent',
        zIndex: 100,
        padding: '0 0 24px 0',
        display: 'flex',
        justifyContent: 'center'
      }}>
        <button
          style={{
            width: '92%',
            height: 44,
            background: '#ff4d4f',
            color: '#fff',
            border: 'none',
            borderRadius: 24,
            fontSize: 16,
            fontWeight: 'bold',
            letterSpacing: 2,
            marginTop: 8,
            boxShadow: '0 2px 8px rgba(255,77,79,0.08)',
            cursor: 'pointer'
          }}
          onClick={() => navigate('/add')}
        >
          新增收货地址
        </button>
      </div>
    </div>
  )
}

export default Zhi
